<template>
  <div id="app1">
    <div class="box">
      <!-- 以下是默认配置参数, 可以根据个人需要进行修改 -->
      <img src="../../assets/images/luck_bg.png" class="im" alt="" />
      <LuckyWheel
        ref="LuckyWheel"
        width="299px"
        height="299px"
        :prizes="awards"
        :blocks="blocks"
        :buttons="buttons"
        :default-config="defaultConfig"
        :default-style="defaultStyle"
        @start="handleStart"
        @end="handleEnd"
        class="can"
      />
      <img
        class="btn"
        @click="showHistory"
        src="../../assets/images/btn2.png"
        alt=""
        srcset=""
      />
      <div class="cardTest">
        <div>
          <!-- <p>{{memberServiceCardDTOLength.length}}</p> -->
          <p>{{ memberServiceCardDTOLength.length }}<span>张</span></p>
        </div>
        <span>剩余抽奖卡</span>
      </div>
    </div>
    <div class="historyAlert" v-if="state">
      <div class="center">
        <div class="list">
          <div class="item" v-for="(item, index) in list" :key="index">
            <div>
              <p>{{ item.giftName }}</p>
            </div>
            <span>{{ item.createTime }}</span>
          </div>
          <!-- <p class="nil" v-if="!isList">您暂无中奖纪录</p> -->
        </div>
      </div>
      <img
        src="../../assets/images/red_close.png"
        class="close"
        @click="hide"
      />
    </div>
    <div class="vloading" v-if="loadingState">
      <div class="bokl">
        <van-loading color="#0094ff" text-size="18px" vertical
          >加载中...</van-loading
        >
      </div>
    </div>
    <div class="animate" v-if="aniState">
      <div class="aniFater"></div>
      <img
        src="../../assets/images/bulingbuling.png"
        :class="transState ? 'bl bl_1' : 'bl'"
        alt=""
      />
      <img
        src="../../assets/images/bulingbuling.png"
        :class="transState ? 'bl bl_2' : 'bl'"
        alt=""
      />
      <img
        src="../../assets/images/bulingbuling.png"
        :class="transState ? 'bl bl_3' : 'bl'"
        alt=""
      />
      <img
        src="../../assets/images/luck_redPack_bg.png"
        :class="transState ? 'block block-ani' : 'block'"
        alt=""
      />
      <img
        src="../../assets/images/red_icon.png"
        :class="b1_state ? 'niui niui-ani' : 'niui'"
        alt=""
      />
      <div :class="b1_state ? 'cont con_ani' : 'cont'">
        <p class="title">{{ title2 }}</p>
        <p class="content">{{ title }}</p>
      </div>
      <img
        src="../../assets/images/red_close.png"
        @click="close"
        :class="b2_state ? 'red_close red_close_ani' : 'red_close'"
        alt=""
      />
    </div>
    <div class="fixed" v-if="b3_state">
      <div class="fixed_content">
        <p>{{ title3 }}</p>
        <p v-if="!isList">暂无中奖记录</p>
        <img src="../../assets/images/red_icon.png" class="niu" alt="" />
      </div>
    </div>
    <div class="fixed" v-if="!isList">
      <div class="fixed_content">
        <p>暂无中奖记录</p>
        <img src="../../assets/images/red_icon.png" class="niu" alt="" />
      </div>
      <img
        src="../../assets/images/red_close.png"
        class="close"
        @click="hideList"
      />
    </div>
  </div>
</template>

<script>
import { getUrlParams } from '@/utils/local-storage';
import { Dialog, Toast } from 'vant';
import axios from 'axios';
export default {
  components: {},
  data () {
    return {
      awards: [],
      title: '',
      phone: '',
      state: false,
      list: [],
      isList: true,
      index: '',
      bok: true,
      Luckstate: false,
      activityId: '',
      memberId: '',
      loadingState: false,
      blocks: [
        { padding: '8px', background: '#fff' },
        { padding: '10px', background: '#FFD999' },
      ],
      buttons: [
        { radius: '36px', background: '#D0021B' },
        {
          radius: '32px',
          background: '#FFF378',
          pointer: true,
          fonts: [
            {
              text: '抽奖',
              fontColor: '#D0021B',
              fontSize: '15px',
              fontWeight: '600',
              top: '-10px',
            },
          ],
        },
      ],
      defaultConfig: {
        gutter: '5px',
        offsetDegree: 30,
      },
      defaultStyle: {
        fontColor: '#d64737',
        fontSize: '11px',
      },
      memberServiceCardDTOLength: 0,
      transState: false,
      b1_state: false,
      b2_state: false,
      b3_state: false,
      aniState: false,
      title2: '恭喜您获得',
      title3: '',
      url: "https://www.slb.careoe.com/applet/",
      //   url: 'https://www.dev.careoe.com/applet/',
    };
  },
  methods: {
    close () {
      this.aniState = false;
      this.transState = false;
      this.b1_state = false;
      this.b2_state = false;
    },
    async handleStart () {
      if (this.memberServiceCardDTOLength.length == 0) {
        Dialog.alert({
          title: '提示',
          message: '暂无抽奖机会',
        });
        return false;
      }
      if (!this.bok) {
        return false;
      }
      this.bok = false;
      this.$refs.LuckyWheel.play();
      this.index = await this.doLetteryActivityByMemberId();

      setTimeout(() => {
        this.$refs.LuckyWheel.stop(this.index);
      }, 3000);
    },
    handleEnd (e) {
      this.getLetteryActivityByMemberIdAndActivityId();
      if (e.title) {
        if (e.title == '谢谢参与') {
          this.title2 = '车油服祝新年快乐🎊';
        } else {
          this.title2 = '恭喜您获得';
        }
        this.aniState = true;
        this.title = e.title;
        setTimeout(() => {
          this.transState = true;
          setTimeout(() => {
            this.b1_state = true;
            this.b2_state = true;
          }, 2000);
        }, 300);
      }
      this.bok = true;
    },
    showHistory () {
      this.gethistoryList();
    },
    hide () {
      this.state = false;
    },
    // 获取奖品
    async getLetteryActivityByMemberIdAndActivityId () {
      Toast.loading({
        duration: 0,
        message: '加载中...',
        forbidClick: true,
      });
      let res = await axios.post(
        this.url + 'api/activity/getLetteryActivityByMemberIdAndActivityId',
        {
          memberId: getUrlParams('memberId'),
          activityId: getUrlParams('activityId'),
        }
      );
      if (res.data.status == 200) {
        this.awards = [];
        res.data.result.giftDTOList.map((item, index) => {
          this.awards.push({
            fonts: [
              {
                text: item.name,
                top: '20%',
                fontColor: index % 2 ? '#fff' : '#F3612C',
                fontSize: '16px',
              },
            ],
            title: item.name,
            background: index % 2 ? '#F3612C' : '#FFD999',
            id: item.id,
          });
        });
        this.memberServiceCardDTOLength =
          res.data.result.memberServiceCardDTOList;
        this.Luckstate = true;
      } else {
        this.b3_state = true;
        this.title3 = res.data.message;
        this.Luckstate = true;
      }
      Toast.clear();
    },
    // 获取抽奖结果
    doLetteryActivityByMemberId () {
      return new Promise(async (reslove) => {
        let res = await axios.post(
          this.url + 'api/activity/doLetteryActivityByMemberId',
          {
            memberId: getUrlParams('memberId'),
            activityId: getUrlParams('activityId'),
          }
        );
        if (res.data.status == 200) {
          this.awards.map((item, idx) => {
            if (res.data.result.giftId == item.id) {
              reslove(idx);
            }
          });
        } else {
          this.$refs.LuckyWheel.stop(-1);
          Dialog.alert({
            title: '提示',
            message: res.data.message,
          });
        }
      });
    },
    async printLog () {
      let arr = [];
      for (var i = 0; i < 100; i++) {
        arr.push(await this.doLetteryActivityByMemberId());
      }
      console.log(arr);
    },
    hideList () {
      this.isList = true;
    },
    // 获取我的中奖记录
    async gethistoryList () {
      let res = await axios.post(
        this.url + 'api/activity/getLotteryActivityGiftRecord',
        {
          memberId: getUrlParams('memberId'),
          activityId: getUrlParams('activityId'),
        }
      );
      this.list = res.data.result || [];
      if (this.list.length) {
        this.state = true;
      } else {
        this.isList = false;
      }
    },
  },
  mounted () {
    document.title = '转盘抽奖';
    this.getLetteryActivityByMemberIdAndActivityId();
    this.phone = getUrlParams('phone');
    this.memberId = getUrlParams('memberId');
    this.activityId = getUrlParams('activityId');
  },
};
</script>

<style lang="scss" scoped>
.nil {
  color: #9b9b9b;
  text-align: center;
  font-size: 16px;
  margin-left: -7px;
}
.fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba($color: #000000, $alpha: 0.7);
  .fixed_content {
    margin: 160px auto 0;
    position: relative;
    width: 308px;
    height: 384px;
    background: url('../../assets/images/luck_redPack_bg.png') no-repeat;
    background-size: cover;
    overflow: hidden;
    .niu {
      width: 180px;
      height: 157px;
      margin: -30px auto 0;
      display: block;
    }
    p {
      text-align: center;
      font-size: 22px;
      color: #9b9b9b;
      font-weight: 600;
      line-height: 136px;
      width: 227px;
      height: 136px;
      background: #fff;
      margin: 57px auto 0;
    }
  }
}
.cardTest {
  display: block;
  text-align: center;
  color: #fff;
  font-size: 16px;
  margin-top: 9.5px;
  > div {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    p {
      font-size: 55px;
      color: #ffd999;
      line-height: 76px;
      padding: 0;
      margin: 0;
    }
    span {
      font-size: 16px;
      color: #ffd999;
      line-height: 23px;
      margin-left: 9px;
    }
  }
  span {
    color: #ffd999;
    font-size: 22px;
    line-height: 32px;
  }
}
.niui {
  width: 180px;
  height: 157px;
  top: 375px;
  position: absolute;
  z-index: 2;
  left: 50%;
  margin-left: -90px;
  display: none;
}
.niui-ani {
  animation: scalk 2s;
  display: block;
}
.red_close {
  width: 40px;
  height: 40px;
  position: absolute;
  left: 50%;
  margin-left: -20px;
  top: 579px;
  transition: all 2s;
  opacity: 0;
}
.red_close_ani {
  opacity: 1;
}

.cont {
  background: #fff;
  width: 227px;
  height: 245px;
  position: absolute;
  top: 227px;
  left: 50%;
  margin-left: -113px;
  z-index: 1;
  opacity: 0;
  transition: all 2s;
  p {
    color: #ff6969;
    font-size: 22px;
    font-weight: 600;
    text-align: center;
    margin-top: 16px;
  }
}
.con_ani {
  opacity: 1;
}
@keyframes mymove_1 {
  0% {
    opacity: 0;
    transform: scale(0.6);
    display: block;
  }
  50% {
    opacity: 1;
    transform: scale(1.8);
  }
  100% {
    opacity: 0;
    transform: scale(0.6);
  }
}
@keyframes mymove_2 {
  0% {
    opacity: 0;
    transform: scale(0.9);
    display: block;
  }
  50% {
    opacity: 1;
    transform: scale(2);
  }
  100% {
    opacity: 0;
    transform: scale(0.9);
  }
}
@keyframes mymove_3 {
  0% {
    opacity: 0;
    transform: scale(2);
    display: block;
  }
  50% {
    opacity: 1;
    transform: scale(1.5);
  }
  100% {
    opacity: 0;
    transform: scale(0.9);
  }
}
@keyframes scalk {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  70% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
.bl {
  width: 77px;
  height: 76px;
  position: absolute;
  opacity: 0;
  display: none;
}
.bl_1 {
  left: 18px;
  top: 101px;
  display: block;

  animation: mymove_1 3s 1s ease;
}
.bl_2 {
  left: 146px;
  top: 57px;
  animation: mymove_2 3s 2s ease;
  display: block;
}
.bl_3 {
  right: 22px;
  top: 92px;
  animation: mymove_3 3s ease;
  display: block;
}
.block {
  width: 308px;
  height: 384px;
  opacity: 0;
  display: block;
  margin: 0 auto;
  position: absolute;
  top: 240px;
  left: 50%;
  margin-left: -154px;
  transition: all 2s;
  transform: perspective(700px) rotateY(0deg) scale(0);
}
.block-ani {
  top: 177px;
  width: 308px;
  height: 384px;
  opacity: 1;
  transform: perspective(700px) rotateY(720deg) scale(1);
}
.animate {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.aniFater {
  background: rgba($color: #000000, $alpha: 0.6);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.vloading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bokl {
  background: #fff;
  width: 120px;
  height: 120px;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0.9;
}
.view-router {
  background: transparent;
}
#app1 {
  overflow: hidden;
}
.box {
  overflow: hidden;
}
.item {
  border-bottom: 1px solid #f2f6fc;
  height: 64px;
}
.item > div {
  display: flex;
  justify-content: space-between;
}
.item > div p:nth-of-type(1) {
  font-size: 12px;
  color: #000;
}
.item > div p:nth-of-type(2) {
  color: #ff6969;
  font-size: 12px;
  margin-right: 14px;
}
.item > span {
  color: #a4abb3;
  font-size: 12px;
}
.historyAlert {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: -100px;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  display: flex;
  align-items: center;
  max-height: 100vh;
  overflow: hidden;
  justify-content: center;
  -webkit-overflow-scroll: touch;
  flex-direction: column;
}
.list {
  width: 281px;
  height: 305px;
  background: #fff;
  border-radius: 6px;
  overflow-y: scroll;
  margin: 50px auto 13px;
  padding-left: 14px;
}
.center {
  width: 308px;
  height: 384px;
  border-radius: 7px;
  overflow: hidden;
  z-index: 99999;
  background: url(../../assets/images/luck_redPack_bg.png) no-repeat;
  background-size: cover;
}

.close {
  width: 40px;
  height: 40px;
  margin: 17px auto;
  line-height: 38px;
  text-align: center;
  display: block;
}
.btn {
  width: 257px;
  height: 56px;
  display: block;
  margin: 41px auto 0;
}
#app {
  padding: 0;

  background: transparent;
}
.can {
  background: transparent;
  height: auto;
  margin: 268px auto 0;
  display: block;
  // background: #000;
}
.im {
  width: 100%;
  position: absolute;
  z-index: -1;
  height: 1555px;
}
.view-router {
  height: auto !important;
}
</style>
